<template>
    <div class="new-papers-container">
        <nav-bar title="新建试卷"></nav-bar>
        <div class="content">
            <p class="title mb20">新建试卷</p>
            <div class="input-item">
                <span>试卷名称：</span>
                <input type="text" placeholder="请输入试卷名称" v-model="form.name">
            </div>
            <div class="input-item">
                <span>考试时限：</span>
                <input type="number" placeholder="请输入考试时限" v-model="form.answerTime">
            </div>
            <div class="input-item">
                <span>试卷名称：</span>
                <div class="input-btn" @click="showPicker">不需要改卷（默认）</div>
            </div>
        </div>

        <van-popup v-model="show" position="bottom">
            <van-picker title="改卷方式" show-toolbar :columns="columns" @confirm="onConfirm"/>
        </van-popup>

        <div class="btn-wrap">
            <div class="btn" @click="goAdd">添加试题</div>
        </div>
    </div>
</template>
<script>
export default {
    name: "new-papers",
    data() {
        return {
            form: {
                answerTime: "",
                correction: false,
                name: "",
            },
            show: false,

            columns: [
                { text: "不需要改卷（默认）", values: false },
                { text: "需要改卷", values: true },
            ],
        };
    },

    methods: {
        goAdd() {
            if (!this.form.answerTime || !this.form.name) {
                this.$toast("试卷信息未填写完整");
                return;
            }
            this.$APIs
                .saveTrainPaper(this.form)
                .then(response => {
                    this.$router.replace({
                        path: "edit-papers",
                        query: {
                            examId: response.examId,
                        },
                    });
                })
                .catch(error => {});
        },
        showPicker() {
            this.show = true;
        },
        onConfirm(e, data) {
            this.form.correction = e.values;
            this.show = false;
        },
    },
};
</script>

<style lang="scss">
.new-papers-container {
    height: 100%;
    padding-bottom: 74px;
    display: flex;
    flex-direction: column;
    .content {
        padding: 15px;
        background-color: #21202e;
        flex: 1;
    }
    .title {
        font-size: 18px;
    }
    .input-item {
        font-size: 15px;
        color: #ffffff;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        span {
        }
        .input-btn {
            flex: 1;
            width: 250px;
            height: 44px;
            border: 1px solid #56baca;
            border-radius: 5px;
            color: #fff;
            background-color: #21202e;
            padding: 0 15px;
            line-height: 40px;
            font-size: 14px;
        }
        input {
            flex: 1;
            width: 250px;
            height: 44px;
            border: 1px solid #56baca;
            border-radius: 5px;
            color: #fff;
            background-color: #21202e;
            padding: 0 15px;
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #6d6d79;
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: #6d6d79;
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {
            color: #6d6d79;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #6d6d79;
        }
    }
}

.btn-wrap {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #161624;
    padding: 15px;
    display: flex;

    .btn {
        flex: 1;
        background: #56baca;
        color: #fff;
        height: 44px;
        text-align: center;
        line-height: 44px;
        border-radius: 5px;
        font-size: 18px;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>

